import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Modal, message, Button, Popover } from 'antd';

@connect(({ localpolicy, loading }) => ({
  localpolicy,
  loading: loading.models.localpolicy,
}))
@Form.create()
class BasicList extends PureComponent {
  state = {
    suppDataList: [], //
    modalSuppliers: false,
  };

  componentDidMount() {}

  // 模态框显隐
  handleModalVisible = flag => {
    this.setState({
      modalSuppliers: !!flag,
    });
  };

  // 合作供应商详情
  suppliersDetail = e => {
    const { localpolicy, dispatch } = this.props;
    dispatch({
      type: 'localpolicy/getCooperaSupper',
      payload: { suppId: e.suppId, areaId: localpolicy.areaId },
    }).then(res => {
      if (res.success) {
        this.setState({
          suppDataList: res.data,
          modalSuppliers: true,
        });
      } else {
        message.warning(res.message || '获取合作供应商详情错误');
        this.setState({
          suppDataList: [],
        });
      }
    });
  };

  render() {
    const { suppliersList } = this.props;
    const { modalSuppliers, suppDataList } = this.state;

    this.searchLayout = {
      labelCol: { md: { span: 21 } },
      wrapperCol: { md: { span: 3 } },
    };

    this.searchLayouttwo = {
      labelCol: { md: { span: 21 } },
      wrapperCol: { md: { span: 3 } },
    };

    return (
      <div>
        <Row gutter={64} style={{ marginLeft: '5px' }}>
          {suppliersList.map(item => (
            <div key={item.suppId} style={{ marginRight: 30 }}>
              {item.name.length > '15' ? (
                <Popover content={item.name}>
                  <a
                    style={{
                      height: '64px',
                      lineHeight: '64px',
                      float: 'left',
                      whiteSpace: 'nowrap',
                      textOverflow: 'ellipsis',
                      overflow: 'hidden',
                      margin: '0 0 0 10px',
                    }}
                    onClick={() => this.suppliersDetail(item)}
                  >
                    {item.name}
                  </a>
                </Popover>
              ) : (
                <a
                  style={{
                    height: '64px',
                    lineHeight: '64px',
                    float: 'left',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    overflow: 'hidden',
                    margin: '0 0 0 10px',
                  }}
                  onClick={() => this.suppliersDetail(item)}
                >
                  {item.name}
                </a>
              )}
            </div>
          ))}
        </Row>
        <Modal
          title="合作供应商"
          visible={modalSuppliers}
          onCancel={() => this.handleModalVisible(false)}
          footer={[
            <Button key="back" onClick={() => this.handleModalVisible(false)}>
              关闭
            </Button>,
          ]}
        >
          {suppDataList &&
            suppDataList.suppBusiScopeList &&
            suppDataList.suppBusiScopeList.map(item => (
              <ul
                style={{
                  border: '1px solid #ccc',
                  padding: '10px 0 10px 0',
                  borderRadius: '8px',
                }}
              >
                <li style={{ margin: '10px 15px' }}>
                  <span style={{ float: 'left' }}>地区：</span>
                  <span style={{ float: 'left' }}>{item.areaInfo.areaName}</span>
                </li>
                <div style={{ clear: 'both' }} />
                <li style={{ margin: '10px 20px 15px 15px' }}>
                  <span style={{ float: 'left' }}>服务产品：</span>
                  <span style={{ float: 'left' }}>
                    {item.prodList.map(itm => (
                      <span>{itm.pdName || '--'},</span>
                    ))}
                  </span>
                </li>
                <div style={{ clear: 'both' }} />
                {item.insAddDeadline ? (
                  <li style={{ margin: '10px 15px' }}>
                    <span style={{ float: 'left' }}>社保增员截止日：</span>
                    <span style={{ float: 'left' }}>{item.insAddDeadline || '--'}</span>
                  </li>
                ) : null}
                <div style={{ clear: 'both' }} />
                {item.insDelDeadline ? (
                  <li style={{ margin: '10px 15px' }}>
                    <span style={{ float: 'left' }}>社保减员截止日：</span>
                    <span>{item.insDelDeadline || '--'}</span>
                  </li>
                ) : null}
                <div style={{ clear: 'both' }} />
                {item.pensAddDeadline ? (
                  <li style={{ margin: '10px 15px' }}>
                    <span style={{ float: 'left' }}>养老增员截止日：</span>
                    <span>{item.pensAddDeadline || '--'}</span>
                  </li>
                ) : (
                  <div />
                )}
                <div style={{ clear: 'both' }} />
                {item.pensDelDeadline ? (
                  <li style={{ margin: '10px 15px' }}>
                    <span style={{ float: 'left' }}>养老减员截止日：</span>
                    <span>{item.pensDelDeadline || '--'}</span>
                  </li>
                ) : (
                  <div />
                )}
                <div style={{ clear: 'both' }} />
                {item.unempAddDeadline ? (
                  <li style={{ margin: '10px 15px' }}>
                    <span style={{ float: 'left' }}>失业增员截止日：</span>
                    <span>{item.unempAddDeadline || '--'}</span>
                  </li>
                ) : (
                  <div />
                )}
                <div style={{ clear: 'both' }} />
                {item.unempDelDeadline ? (
                  <li style={{ margin: '10px 15px' }}>
                    <span style={{ float: 'left' }}>失业减员截止日：</span>
                    <span>{item.unempDelDeadline || '--'}</span>
                  </li>
                ) : (
                  <div />
                )}
                <div style={{ clear: 'both' }} />
                {item.injAddDeadline ? (
                  <li style={{ margin: '10px 15px' }}>
                    <span style={{ float: 'left' }}>工伤增员截止日：</span>
                    <span>{item.injAddDeadline || '--'}</span>
                  </li>
                ) : (
                  <div />
                )}
                <div style={{ clear: 'both' }} />
                {item.injDelDeadline ? (
                  <li style={{ margin: '10px 15px' }}>
                    <span style={{ float: 'left' }}>工伤减员截止日：</span>
                    <span>{item.injDelDeadline || '--'}</span>
                  </li>
                ) : (
                  <div />
                )}
                <div style={{ clear: 'both' }} />
                {item.birthAddDeadline ? (
                  <li style={{ margin: '10px 15px' }}>
                    <span style={{ float: 'left' }}>生育增员截止日：</span>
                    <span>{item.birthAddDeadline || '--'}</span>
                  </li>
                ) : (
                  <div />
                )}
                <div style={{ clear: 'both' }} />
                {item.birthDelDeadline ? (
                  <li style={{ margin: '10px 15px' }}>
                    <span style={{ float: 'left' }}>生育减员截止日：</span>
                    <span>{item.birthDelDeadline || '--'}</span>
                  </li>
                ) : (
                  <div />
                )}
                <div style={{ clear: 'both' }} />
                {item.medAddDeadline ? (
                  <li style={{ margin: '10px 15px' }}>
                    <span style={{ float: 'left' }}>医疗增员截止日：</span>
                    <span>{item.medAddDeadline || '--'}</span>
                  </li>
                ) : (
                  <div />
                )}
                <div style={{ clear: 'both' }} />
                {item.medDelDeadline ? (
                  <li style={{ margin: '10px 15px' }}>
                    <span style={{ float: 'left' }}>医疗减员截止日：</span>
                    <span>{item.medDelDeadline || '--'}</span>
                  </li>
                ) : (
                  <div />
                )}
                <div style={{ clear: 'both' }} />
                {item.insLsPkgList ? (
                  <li style={{ margin: '10px 15px' }}>
                    <span style={{ float: 'left' }}>社保组合：</span>
                    {item.insLsPkgList.map(itm => (
                      <span>{itm.insLsPkgName || '--'},</span>
                    ))}
                  </li>
                ) : (
                  <div />
                )}
                <div style={{ clear: 'both' }} />
                {item.accuAddDeadline ? (
                  <li style={{ margin: '10px 15px' }}>
                    <span style={{ float: 'left' }}>公积金增员截止日：</span>
                    <span>{item.accuAddDeadline || '--'}</span>
                  </li>
                ) : (
                  <div />
                )}
                <div style={{ clear: 'both' }} />
                {item.accuDelDeadline ? (
                  <li style={{ margin: '10px 15px' }}>
                    <span style={{ float: 'left' }}>公积金减员截止日：</span>
                    <span>{item.accuDelDeadline || '--'}</span>
                  </li>
                ) : (
                  <div />
                )}
                <div style={{ clear: 'both' }} />
                {item.accuLsPkgList ? (
                  <li style={{ margin: '10px 15px' }}>
                    <span style={{ float: 'left' }}>公积金组合：</span>
                    {item.accuLsPkgList.map(itm => (
                      <span>{itm.accuLsPkgName || '--'},</span>
                    ))}
                  </li>
                ) : (
                  <div />
                )}
              </ul>
            ))}
        </Modal>
      </div>
    );
  }
}

const BasicListFrom = Form.create()(BasicList);
export default BasicListFrom;
